<template>
		<div>
			 <div class="header">
				 <h3>处理异常答题卡</h3>
				 <p>
					 <b><img src="../../assets/image/school/qp.png" alt="">全屏(F11)</b>
					 <em>退出</em>
				 </p>
			 </div>
			 <div>
				 <div class="cropperBox">
					 <div class="cropperImageset">
						 <ImageSelector :parentData="tabnavindex" />
					 </div>
					 <div class="uploadcardInfo">
						 <h3>2024年9月月考-语文-作文-密号10002</h3>
						 <ul>
							 <li>
								 <span>试题题号：</span>作文
							 </li>
							 <li>
								 <span>试题密号：</span>10002
							 </li>
							 <li>
								 <span>标记类型：</span>字迹看不清
							 </li>
							 <li>
							 	<span>标记教师：</span>高老师
							 </li>
							 <li>
							 	<span>标记时间：</span>2024-01-02
							 </li>
						 </ul>
						 <h3 style="border:none;border-top:solid 1px #D8E4F0;margin-top:25px">处理项</h3>
						 <ul>
							 <li>
								 <span>变更状态：</span>
								 <el-select v-model="examclassify" placeholder="条形码/涂点/手写">
										 <el-option
										   v-for="item in examclassifylist"
										   :key="item"
										   :label="item"
										   :value="item">
										 </el-option>
								  </el-select>
							 </li>
							 <li>
								 <span>处理方法：</span>
								 <el-select v-model="examclassify" placeholder="条形码/涂点/手写">
										 <el-option
										   v-for="item in examclassifylist"
										   :key="item"
										   :label="item"
										   :value="item">
										 </el-option>
								  </el-select>
							 </li>
						 </ul>
						 <div class="qtbuttonset">
							 <em>重新切图</em>
							 <em>重新上传正反面</em>
						 </div>
						 <div class="examboxbutton1">
							 <el-button>确认</el-button>
							 <el-button>上一份</el-button>
							 <el-button>下一份</el-button>
						 </div>
					 </div>
				 </div>
			 </div>
		</div>
</template>

<script>
// import ImageSelector from '../../components/school/imgcj.vue';
// import ImageSelector from '../../components/school/imagecanvas.vue'
import vueCropper from '../../components/school/vuecropper.vue'
// import ImageSelector from '../../components/school/fabricimg.vue'  //切图
import UploadImage from '../../components/school/upload.vue';

export default {
  name: 'App',
  data(){
	return{
	}  
  },
  mounted() {
  },
  methods:{
  },
  components: {
    vueCropper,UploadImage
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header{
	min-width:100%;padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 49px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	height:calc(100vh - 49px);
	background:#fff;
	position:relative
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.qtbuttonset{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:14px;
}
.qtbuttonset em{
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size:14px;
	color:#fff;
	text-align: center;
	line-height: 34px;
	margin:8px;
}
.qtbuttonset em:last-child{
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color:#295CFF;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadcardInfo ul li{
	display: flex;
	align-items: center;
	color:#8E96A4;
	font-size:16px;
	padding:0 24px;
	margin-top:24px;
}
.uploadcardInfo ul li span{
	color:#8E96A4;
	width:100px;
}
.uploadcardInfo ul li >>> .el-input__inner{
	border-radius:10px;
}
.uploadcardInfo ul li >>> .el-textarea{
	width:calc(100% - 100px)
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 49px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 49px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 370px);
	height:calc(100vh - 49px);
	overflow:scroll;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
</style>